<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8" />
    <title>ECharts</title>
    <style>
        .search-btn {
          margin-left: 20px;
        }
        .tableBar{
          justify-content: flex-start !important;
        }
        .info-box{
          margin: -15px -44px 20px;
        }
        .info-box .item-box{
          display: flex;
          height: 20px;
          line-height: 20px;
          font-size: 14px;
          font-weight: 400;
          color: #666666;
          text-align: left;
          margin-bottom: 14px;
        }
        .info-box .item-box:last-child{
          margin-bottom: 0;
        }
        .info-box .item-box .label{
          width: 96px;
        }
        .info-box .item-box .des{
          flex: 1;
          color: #333333;
        }
        </style>
    <!-- 引入刚刚下载的 ECharts 文件 -->

</head>

<body>

    <div class="container">
        <!-- 搜索项 -->
        <div class="tableBar">
            <el-input v-model="input" placeholder="请输入订单号" style="width: 250px">
                <i slot="prefix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="init"></i>
            </el-input>
            <el-date-picker v-model="orderTime" clearable value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
                placeholder="选择日期" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']" style="width: 400px;margin-left: 20px;"></el-date-picker>
            <el-button type="primary" class="search-btn" @click="init">查询</el-button>
        </div>
        <el-table :data="tableData" stripe class="tableBox">
            <el-table-column prop="number" label="订单号" min-width="110"></el-table-column>
            <el-table-column prop="订单状态" label="订单状态">
                <template slot-scope="{ row }">
                    <span>{{ getOrderType(row) }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="userName" label="用户"></el-table-column>
            <el-table-column prop="phone" label="手机号"></el-table-column>
            <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
            <el-table-column prop="orderTime" label="下单时间" min-width="100"></el-table-column>
            <el-table-column prop="amount" label="实收金额">
                <template slot-scope="{ row }">
                    <span>￥{{ row.amount }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="btn" label="操作">
                <template slot-scope="{ row }">
                    <el-button type="text" @click="goDetail(row)" class="blueBug">
                        查看
                    </el-button>
                    <el-divider v-if="row.status === 2" direction="vertical"></el-divider>
                    <el-button v-if="row.status === 2" type="text" @click="cancelOrDeliveryOrComplete(3, row.id)"
                        class="blueBug">
                        派送
                    </el-button>
                    <el-divider v-if="row.status === 3" direction="vertical"></el-divider>
                    <el-button v-if="row.status === 3" type="text" @click="cancelOrDeliveryOrComplete(4, row.id)"
                        class="blueBug">
                        完成
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination class="pageList" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" :current-page.sync="page"
            layout="total, sizes, prev, pager, next, jumper" :total="counts" @size-change="handleSizeChange"
            @current-change="handleCurrentChange"></el-pagination>
    </div>

    <div id="main" style="left: 400px;width: 800px;height:800px;"></div>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入样式 -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../../plugins/axios/axios.min.js"></script>
    <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
    <link rel="stylesheet" href="../../styles/common.css" />
    <link rel="stylesheet" href="../../styles/page.css" />



    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../../plugins/axios/axios.min.js"></script>
    <script src="../../js/request.js"></script>
    <!-- 引入echarts -->
    <script src="../../js/echarts.js"></script>
    <script src="../../api/echarts.js"></script>
    <script>
        new Vue({
            el: "myCharts",
            data() {
                return {
                    myChart: null,
                    option: {
                        title: {
                            text: '套餐售卖统计表',
                            subtext: '菜品',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [
                            {
                                name: 'Access From',
                                type: 'pie',
                                radius: ['40%', '70%'],
                                avoidLabelOverlap: false,
                                data: [
                                    { value: 1048, name: 'Search Engine' },
                                    { value: 735, name: 'Direct' },
                                    { value: 580, name: 'Email' },
                                    { value: 484, name: 'Union Ads' },
                                    { value: 300, name: 'Video Ads' }
                                ],
                                emphasis: {
                                    itemStyle: {
                                        borderRadius: 10,
                                        borderColor: '#fff',
                                        borderWidth: 2
                                    }
                                },
                                label: {
                                    show: false,
                                    position: 'center'
                                }
                            }
                        ]
                    }
                }
            },
            mounted() {
                //加载基本页面
                this.start1();
                //加载餐品售卖信息
                this.start2();
            },
            methods: {
                start1() {
                    var chartDom = document.getElementById('main');
                    this.myChart = echarts.init(chartDom);
                    var option;
                    this.option && this.myChart.setOption(this.option);
                },

                start2() {
                    //getEcharts().then()
                },

            }
        })






    </script>

</body>

</html>